<template>
  <div class="page">
    <div class="scroll-view">
      <customHeader middleTitle="我的销售经理" @leftCallBack="goBack" />
      <searchBar @search="searchCallbck" :clearVal="clearVal" />
      <div class="scroll-ct page-body">
        <div class="section" ref="wrapper" :style="{ height: '100%' }">
          <ul
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="30"
            class="concat-list"
          >
            <li v-for="(item, index) in list" :key="index" class="every">
              <div>
                <div class="info">
                  <div>
                    <img src="../../assets/images/head-test.png" alt="" />
                  </div>
                  <div>
                    <p class="shopName">{{ item.shopName || "--" }}</p>
                    <p class="bdInfo">{{ item.bdName || "--" }}</p>
                  </div>
                </div>
                <!-- <i @click="callUp(item)" class="zhk-bddh ico-phone"></i> -->
                <img class=" ico-phone" @click="callUp(item)" src="../../assets/images/my/Vector.png" alt="">
              </div>
            </li>
          </ul>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner
              :style="{ display: 'inline-block' }"
              type="fading-circle"
            ></mt-spinner>
          </p>
          <noData msg="暂无数据" v-if="list.length == 0" />
          <div v-show="noMore && !loading && list.length !== 0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import customHeader from "../../components/header/header";
import noData from "../../components/noData/noData";
import searchBar from "../../components/searchBar/searchBar";
import jsBridge from "../../tools/jsBridge";
export default {
  name: "Concat",
  components: {
    customHeader,
    searchBar,
    noData,
  },
  data() {
    return {
      loading: false,
      noMore: false,
      currentPage: 1,
      list: [],
      clearVal: null,
      searchTxt: "",
    };
  },
  methods: {
    goBack() {
      if (String(this.$route.query.close) == "true") {
        jsBridge.closeWindow();
      } else {
        this.$router.back();
      }
    },
    searchCallbck(v) {
      this.currentPage = 1;
      this.noMore = false;
      this.list = [];
      this.searchTxt = v;
      this.getData();
    },
    loadMore() {
      if (this.loading || this.noMore) {
        return;
      }
      this.getData();
    },
    getData() {
      this.loading = true;
      this.ajax({
        url: "/newapp/shop/queryShopAndBdInfo.do",
        type: "post",
        data: {
          currentPage: this.currentPage,
          pageSize: 20,
          shopName: this.searchTxt ? this.searchTxt : "",
        },
        // controlLoading: false
      })
        .then((res) => {
          this.loading = false;
          if (res.success) {
            let data = res.resultObject;
            this.list = this.list.concat(data.pageData);
            if (data.nextPage == 0) {
              this.noMore = true;
            } else {
              this.currentPage++;
            }
          } else {
            this.noMore = true;
            this.loading = false;
          }
        })
        .catch((err) => {
          this.noMore = true;
          this.loading = false;
        });
    },
    callUp(item) {
      let params = {
        tel: item.bdPhone,
      };
      jsBridge.callUp(params);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/public";
.concat-list {
  @include remCalc(margin-top, 20);
  width: pw(355);
margin-left: pw(10);

  @extend %box-sizing;
  li {
    width: pw(355);
      height: pw(74);
      margin-top: pw(10);
      background-color: white;
    position: relative;
    border-radius: pw(10);
    @include thin-border(false, false, bottom);
    img {
      width: pw(44);
      height: pw(44);
      margin-top: pw(15);
      margin-left: pw(15);
    }
    .info {
      display: flex;
      .shopName {
        @include remCalc(padding-top, 20);
        @include remCalc(font-size, 32);
        @include remCalc(line-height, 36);
        @include remCalc(height, 36);
        color: rgba(51, 51, 51, 1);
        margin-left: pw(9);
      margin-top: pw(5);
        font-weight:500;
        @include remCalc(max-width, 600);
        @extend %text-overflow;
      }
      .bdInfo {
        @include remCalc(margin-top, 10);
        @include remCalc(font-size, 28);
        @include remCalc(line-height, 34);
        @include remCalc(height, 34);
        color: #999;
        @include remCalc(padding-bottom, 10);
        position: relative;
        margin-left: pw(9);
        .icon {
          position: absolute;
          @include remCalc(font-size, 32);
          @include remCalc(top, 2);
          @include remCalc(left, 0);
          color: $color-red;
        }
      }
    }
    .ico-phone {
      position: absolute;
      @include remCalc(top, 10);
      @include remCalc(right, 0);
      @include remCalc(padding-right, 30);
      @include remCalc(padding-left, 100);
      @include remCalc(font-size, 48);
      @include remCalc(line-height, 100);
      // color: $color-red;
      width: pw(30);
      height: pw(30);
    }
  }
}
</style>
